<template>
  <div class="propConfig">
    <DividerTile title="属性配置" :isShow.sync="isShow"></DividerTile>
    <el-form size="small" label-width="90px" v-show="isShow">
      <el-form-item label="显示列数">
        <el-select v-model="activeFormData.columns" @change="valueChange($event, 'columns')" class="width100">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="顶部栏标题">
        <el-input v-model="activeFormData.title" @change="valueChange($event, 'title')"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const options = [
  { label: '1', value: '1' },
  { label: '2', value: '2' },
  { label: '3', value: '3' }
]
import { mapMutations, mapState } from 'vuex'
import DividerTile from '../../../dividerTile'
export default {
  name: 'datetimeProp',
  components: {
    DividerTile
  },
  data() {
    return {
      isShow: true,
      options
    }
  },
  computed: {
    ...mapState('pageData', ['activeFormData'])
  },
  methods: {
    ...mapMutations('pageData', ['SETPROP']),
    valueChange(value, key) {
      this.SETPROP({
        value,
        key
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.propConfig {
  padding-right: 10px;
}
</style>